import {defineComponent, ref} from "vue";
import {NCollapse, NCollapseItem, NGi, NGrid} from "naive-ui";
import Draggable from "vuedraggable-es";
import {nanoid} from "nanoid";

export default defineComponent({
    name: "leftnav",
    setup() {
        // 拖拽组件的配置
        const group3 = {name: "list", pull: "clone", put: false}
        // 容器
        const rongqilist = ref<Array<any>>([
            {label: "父级栅格", value: "row", move: false, id: nanoid()},
            {label: "卡片", value: "card", move: false, id: nanoid()},
        ])
        // 基础字段
        const taglist = ref<Array<any>>([
            {label: "按钮", value: "button", move: false, id: nanoid()},
            {label: "文本输入框", value: "input", move: false, id: nanoid()},
            {label: "选择框", value: "select", move: false, id: nanoid()},
            {label: "级联选择框", value: "cascader", move: false, id: nanoid()},
            {label: "多选框", value: "checkbox", move: false, id: nanoid()},
            {label: "日期时间", value: "picker", move: false, id: nanoid()},
            {label: "单选框", value: "radio", move: false, id: nanoid()},
            {label: "开关框", value: "switch", move: false, id: nanoid()},
            {label: "多行文本框", value: "textarea", move: false, id: nanoid()},
            {label: "插槽", value: "slot", move: false, id: nanoid()},
        ])
        // 高级字段
        const gaotaglist = ref<Array<any>>([
            {label: "图片上传", value: "imgupload", move: false, id: nanoid()},
            {label: "文件上传", value: "fileupload", move: false, id: nanoid()},
            {label: "富文本", value: "richtext", move: false, id: nanoid()},
        ])
        // 阻止火狐浏览器的拖拽导致打开百度搜索的bug
        const onEnd = () => {
            document.body.ondrop = (event: any) => {
                event.preventDefault();
                event.stopPropagation();
            }
        }
        // 不允许停靠到这些列表上  https://www.itxst.com/vue-draggable/ufjv2i7j.html
        const onMove = (e: any, originalEvent: any) => {
            const moveItem = e.relatedContext.element;
            if (moveItem) {
                return !!moveItem.move
            }
            return true

        }
        // 克隆函数  创建相应的组件
        const cloneDog = (row: any) => {
            console.log("触发克隆函数")
            const result =  {
                id: nanoid(),
                label: row.label,    // 标题
                move: true,   // 不可移动
                span: "24",  // 宽度
                type: row.value, // 输入框类型
                slot: undefined,    // 是否是插槽
                show: true,   // 是否显示
                key: "请输入key", // 字段的键
                default: "", // 默认值
                placeholder: "请输入文字",// 提示文字
                clearable: true, // 清楚按钮
                disabled: false,// 不可编辑
                size: "small", // 大小
                options: undefined, // 备选项
                required: false, // 是否必填
                maxlength: null, // 最大长度
                minlength: null, // 最小长度
                multiple: false,  // 是否多选
                tooltip: "", // 滑块覆盖的提示
                placement: "top", // 提示的弹出位置
                max: "0", // 最大值
                min: "0", // 最小值
                dateType: "datetime", // 时间选择器的类型
                round: undefined,  // 是否是圆形
                valueField: "value",   // 关键字
                labelField: "label", // 关键字
                childrenField: "children",  // 关键字
                filterable: false,  // 过滤功能
                rules: undefined,  // 校验规则
                path: "key",   // 值所在路径
                inputType: "text",    // 输入框类型，默认text，或者password
                prefix: undefined,  // input前缀
                suffix: undefined,  // input后缀
                listType: "text",    // 上传后文件的样式
                directoryDnd: false, // 支持拖拽上传
                maxfiles: 1, // 最大上传数量
                cascade: false,  // 级联选择器是否级联
                maxselect: undefined,    // 选择框的最大选择数量
                change: "",  // 改变的回调
                create: "",  // 创建的回调
                mounted: "",  // 挂载的回调
                classlist:"",   // 自定义的class
                stylelist:"",   // 自定义的style
            }
            // 根据不同的组件，赋值不同的值
            switch (row.value) {
                case "select":
                    result.placeholder = "请选择"
                    break;
                case "radio":
                    result.placeholder = "请选择"
                    break;
                case "checkbox":
                    result.placeholder = "请选择"
                    break;
                case "cascader":
                    result.placeholder = "请选择"
                    break;
            }
            return result
        }
        // 拖拽插槽
        const slots = {
            item: (canshu: any) => {
                return <div
                    class="bg-gray-200 border border-gray-400 hover:border-blue-400 cursor-move py-4px juzhong1">
                    <span>{canshu.element.label}</span>
                </div>
            }
        }
        // 折叠面板的标题
        const CollapseTitle = (name: string) => <span class="text-base font-normal">{name}</span>
        // 组件库
        return () => (<div class="w-full h-full overflow-x-hidden overflow-y-auto">
            <NCollapse default-expanded-names="1" accordion>
                <NCollapseItem title="容器" name="1" v-slots={{
                    header: () => CollapseTitle("容器"),
                    default: () => <Draggable
                        class="grid grid-cols-2 gap-2"
                        list={rongqilist.value}
                        v-slots={slots}
                        onEnd={onEnd}
                        clone={cloneDog}
                        item-key={"id"}
                        group={group3}
                        move={onMove}
                    >
                    </Draggable>
                }}/>
                <NCollapseItem title="基础字段" name="2" v-slots={{
                    header: () => CollapseTitle("基础字段"), default: () => <Draggable
                        class="grid grid-cols-2 gap-2"
                        list={taglist.value}
                        v-slots={slots}
                        onEnd={onEnd}
                        item-key={"id"}
                        clone={cloneDog}
                        group={group3}
                        move={onMove}
                    >
                    </Draggable>
                }}/>
                <NCollapseItem title="高级字段" name="3" v-slots={{
                    header: () => CollapseTitle("高级字段"), default: () => <Draggable
                        class="grid grid-cols-2 gap-2"
                        list={gaotaglist.value}
                        v-slots={slots}
                        onEnd={onEnd}
                        item-key={"id"}
                        clone={cloneDog}
                        group={group3}
                        move={onMove}
                    >
                    </Draggable>
                }}/>
            </NCollapse>
        </div>)
    },
})
